<template>
  <el-drawer v-model="isOpenWin" class="cupk2-data-form" :append-to-body="true" :with-header="false" size="900px">
    <el-container>
      <el-header>
        <div class="title" style="margin-bottom: 20px;">知识标签</div>
      </el-header>
      <el-main>
        <el-container>
          <el-container>
            <el-header>

              <Data_querys placeholder="名称" :isShowQueryPlus="true">
              </Data_querys>
              <div class="cupk2-data-buttons-operators">
                <el-button v-if="false" icon="Plus" type="primary" @click="openDataFormClick" plain>创建</el-button>
                <el-button v-if="false" icon="Delete" type="danger" @click="datasDeleteClick" plain>删除</el-button>
              </div>
            </el-header>
            <el-main>

              <div class="cupk2-data-table">
                <el-table v-loading="loadingFlag" :data="dataResult.data" :stripe="true"
                  @selection-change="handleSelectionChange" :highlight-current-row="true" class="table"
                  @sort-change="(data: SortInfo) => { doDataQuery(tableUtils.getSortQuery(data)) }">
                  <el-table-column fixed="left" type="selection" width="55" />
                  <el-table-column sortable="custom" prop="NOTE" label="备注" min-width="150" />
                  <el-table-column sortable="custom" prop="TAGKEY" label="标签关键字" min-width="120" />
                  <el-table-column sortable="custom" prop="TITLE" label="标签名称" min-width="120" />
                  <el-table-column sortable="custom" prop="TYPE" label="标签类型" min-width="100" />
                  <el-table-column fixed="right" label="操作" min-width="200">
                    <template #default="scope">
                      <el-button link type="primary" icon="View" size="small" @click="dataViewClick(scope.row)">
                        查看
                      </el-button>
                      <el-button link v-if="false" type="primary" icon="Edit" size="small"
                        @click="dataEditClick(scope.row)">
                        修改
                      </el-button>
                      <el-button link v-if="false" type="danger" icon="Delete" size="small"
                        @click="dataDeleteClick(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-main>
            <el-footer>

              <Data_page :remoteData="dataResult" />
            </el-footer>
          </el-container>
        </el-container>
      </el-main>
    </el-container>

    <ZhzmKnowTag_form_query></ZhzmKnowTag_form_query>

    <ZhzmKnowTag_form_data></ZhzmKnowTag_form_data>
  </el-drawer>
</template>
<script setup lang="ts">
const isOpenWin = ref(false);
import Data_page from '@/components/datas/data_page.vue';
import { onBeforeMount, onBeforeUnmount, onMounted, provide, reactive, ref } from 'vue';
import cupk2Request from '@/service/remoteRequests/Cupk2Request';
import Data_querys from '@/components/datas/data_querys.vue';
import notice from '@/components/msg/CupkNotice';
import QueryUtils from '@/hook/cupkQueryUtils'
import mitt from 'mitt';
import { PageEvent } from '@/types/commons/PageEvent';
import type { SortInfo } from '@/types/elementplus/SortInfo';
import type { DataQuery } from '@/types/commons/DataQuery';
import type { DataResult } from '@/types/commons/DataResult';
import tableUtils from '@/hook/cupkTableUtils';
import ZhzmKnowTag_form_query from './components/zhzmknowtag_form_query.vue';
import ZhzmKnowTag_form_data from './components/zhzmknowtag_form_data.vue';
import { getCreatType, getUpdateType, getViewType, type FormParam } from '@/types/commons/FormType';
import Cupk2Request from '@/service/remoteRequests/Cupk2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import { ElMessageBox } from 'element-plus';










const eventBus = mitt();
const dataResult: DataResult = reactive(QueryUtils.getDefaultResult());
const dataQuery: DataQuery = reactive({});
const loadingFlag = ref(true);
const multipleSelection = ref([]);
const handleSelectionChange = (selection: []) => {
  multipleSelection.value = selection;
};


let knowid = 'NONE';
const openWin = (row: { ID: string }) => {
  knowid = row.ID
  isOpenWin.value = true;
  doDataQuery();
};
/**
 * 后台检索查询--HTTP(POST)
 * @param query
 */
const doDataQuery = async (query?: DataQuery) => {
  Object.assign(dataQuery, query)
  QueryUtils.initRule(dataQuery, "knowid", knowid, "=");
  cupk2Request.search('api/zhzmknowtag/query', dataQuery, loadingFlag)
    .then((remoteResult: DataResult) => {
      Object.assign(dataResult, remoteResult);
    })
    .catch((msg: string) => {
      notice.byError(msg);
    });
}

/**
 * 后台批量删除--HTTP(DELETE)
 * @param ids
 */
const doDataDelete = (ids: string[]) => {
  Cupk2Request.submit(
    'api/zhzmknowtag/batch',
    RequestTypeEnum.delete,
    loadingFlag, ids
  ).then(() => {
    doDataQuery();
  }).catch((msg: string) => {
    notice.byError(msg);
  });
}


/**
 * 打开数据更新窗口-事件
 * @param row 选定行数据
 */
const dataEditClick = (row: { ID: string }) => {
  eventBus.emit(PageEvent.data_form_open, { isOpen: true, type: <FormParam>{ type: getUpdateType(), id: row.ID, data: row } });
}

/**
 * 删除一条-事件
 * @param row 选定行数据
 */
const dataDeleteClick = (row: { ID: string }) => {
  ElMessageBox.confirm('确认删除?', { icon: 'QuestionFilled' })
    .then(() => {
      doDataDelete([row.ID]);
    }).catch(() => { });
}

/**
 * 删除多条-事件
 * @param row
 */
const datasDeleteClick = () => {
  const selection: { ID: string; }[] = multipleSelection.value;
  const ids = selection.map(item => item.ID);
  ElMessageBox.confirm('当前选定' + ids.length + '条数据,确认删除?', { icon: 'QuestionFilled' })
    .then(() => {
      doDataDelete(ids);
    }).catch(() => { });
}



/**
 * 打开数据查看窗口-事件
 * @param row 选定行数据
 */
const dataViewClick = (row: { ID: string }) => {
  eventBus.emit(PageEvent.data_form_open, { isOpen: true, type: <FormParam>{ type: getViewType(), id: row.ID, data: row } });
}


/**
 * 打开数据创建窗口-事件
 */
const openDataFormClick = () => {
  eventBus.emit(PageEvent.data_form_open, { isOpen: true, type: <FormParam>{ type: getCreatType() } });
}



defineExpose({
  openWin
});
onMounted(() => {

  doDataQuery();

  eventBus.on(PageEvent.data_do_query, (query) => {
    doDataQuery(query as DataQuery);
  })
});
onBeforeMount(() => {
  provide('eventBus', eventBus);
});
onBeforeUnmount(() => {
  eventBus.all.clear();
})
</script>
